/**
 * Created by fangshufeng on 2017/9/18.
 */

import  React from 'react';

export  default  class  FormCode extends  React.Component {

    constructor(){
        super();
        this.state={
            value:'',
        }
    }







    /**
     * 使用箭头函数的作用可以避免使用bind
     * */
    changFuc = (e) => {
        this.setState({
            value:e.target.value,
        })
    };

    handleSubmit= (event) => {
        alert('你刚刚输入的内容是: ' + this.state.value.toUpperCase());

        /**
         * 由于去掉了默认的加载新页面效果这里需要手动清空输入框的内容
         * */
        this.setState({
            value:'',
        });
        /**
         * 下面这个方法可以禁用默认加载新页面的动作
         * */
        event.preventDefault();
    }

    render(){
        return(<form onSubmit={this.handleSubmit}>
            <label>
                Name:
                <input type="text"
                       value={this.state.value}
                       placeholder="请输入默认内容"
                       // pattern="[0-9]"
                       onChange={this.changFuc}
                       style={{height:30}}
                />
            </label>
            <input type="submit" value="Submit"/>
        </form>);
    }
}